import React, { useState, useContext } from "react";
import FormContext from "../../context/user/formContext";
import FormQueryContext from "../../context/user/formQueryContext";
import GoodsCheckContext from "../../context/user/goodsCkeckContext";
import {
  View,
  StyleSheet,
  Text,
  TouchableOpacity,
  StatusBar,
  Platform,
  Dimensions,
  ActivityIndicator,
} from "react-native";
import { AntDesign } from "@expo/vector-icons";

const dimen = Dimensions.get("window");
const width = dimen.width;

const FormQueryScreen = ({ navigation }) => {
  const { formData } = useContext(FormContext);
  const { isLoading, formQueryData } = useContext(FormQueryContext);
  // console.log("同一公司----", formQueryData[1]);
  // console.log("最低价----", formQueryData[0]);
  // console.log("表单查询---", formQueryData);
  const { queryData, editData } = useContext(GoodsCheckContext);
  // console.log("kkkkkkkk", queryData);

  const [showWay, setShowWay] = useState(0);
  const wayOptions = ["最低价", "同一商家"];

  let priceResult = 0;

  let noneGoods = "";

  return (
    <View style={styles.container}>
      <View style={{ height: "80%", justifyContent: "center" }}>
        <View style={styles.addModal}>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "space-between",
              marginLeft: 20,
              marginBottom: 7,
            }}
          >
            <Text
              style={{
                alignSelf: "center",
                fontSize: 18,
                fontWeight: "bold",
                // marginBottom: 20,
              }}
            >
              报价单
            </Text>
            {/* <View style={{ flexDirection: "row-reverse", marginTop: 25 }}>
              {wayOptions.map((tag, index) => {
                return (
                  <TouchableOpacity
                    style={{ marginLeft: 10 }}
                    key={index}
                    onPress={() => {
                      setShowWay(index);
                    }}
                  >
                    <Text
                      key={index}
                      style={
                        index === showWay ? styles.selectedTag : styles.tag
                      }
                    >
                      {tag}
                    </Text>
                  </TouchableOpacity>
                );
              })}
            </View> */}
          </View>

          {isLoading ? (
            <View style={{ justifyContent: "center", flex: 1, marginTop: 20 }}>
              <ActivityIndicator size="small" color="#0000ff" />
              {/* <Text>加载</Text> */}
            </View>
          ) : (
            <View>
              {showWay == 0 ? (
                <View>
                  {formQueryData[0].map((goods, index) => {
                    // console.log(goods);
                    if (goods) {
                      priceResult += goods.price * goods.amount;
                      return (
                        <TouchableOpacity
                          key={index}
                          // onPress={() => {
                          //   editData(formQueryData[2]);
                          //   // console.log("看看", formQueryData[2]);
                          //   navigation.navigate("GoodsCheckQuery", {
                          //     page: index,
                          //   });
                          // }}
                        >
                          <View style={styles.borderView}>
                            <View>
                              <View style={styles.itemView}>
                                <View style={{ marginTop: 2 }}>
                                  <Text>
                                    {goods.basePlate.category +
                                      goods.basePlate.type +
                                      " * " +
                                      goods.shroudPlate.category +
                                      goods.shroudPlate.type}
                                  </Text>
                                </View>
                                <View
                                  style={{
                                    flexDirection: "row",
                                    justifyContent: "space-between",
                                    marginTop: 2,
                                  }}
                                >
                                  <View style={{ marginTop: 6 }}>
                                    <Text
                                      style={{ color: "#999", fontSize: 13 }}
                                    >
                                      {goods.price + " 元/件"}
                                    </Text>
                                  </View>
                                  <View
                                    style={{
                                      flexDirection: "row",
                                      paddingLeft: 2,
                                      paddingRight: 2,
                                      borderColor: "#ddd",
                                      borderWidth: 1,
                                      borderRadius: 5,
                                    }}
                                  >
                                    <AntDesign
                                      name="close"
                                      size={10}
                                      color="#999"
                                      style={{ marginTop: 7, marginRight: 2 }}
                                    />
                                    <Text sty={{ fontSize: 12 }}>
                                      {goods.amount}
                                    </Text>
                                  </View>
                                </View>
                                {/* <View
                                  style={{
                                    flexDirection: "row",
                                    justifyContent: "space-between",
                                    marginTop: 2,
                                  }}
                                >
                                  <View style={{ marginTop: 5 }}>
                                    <Text
                                      style={{ color: "#999", fontSize: 12 }}
                                    >
                                      {goods.company.company_name}
                                    </Text>
                                  </View>
                                </View> */}
                              </View>
                            </View>
                          </View>
                        </TouchableOpacity>
                      );
                    } else {
                      noneGoods +=
                        formData[index].detail.basePlate.category[1] +
                        formData[index].detail.basePlate.type[1] +
                        "*" +
                        formData[index].detail.shroudPlate.category[1] +
                        formData[index].detail.shroudPlate.type[1] +
                        ",";
                      return null;
                    }
                  })}
                  {noneGoods != "" ? (
                    <View style={{ marginTop: 15 }}>
                      {/* <Text style={{ color: "#999", fontSize: 13 }}>
                        *提示：暂时没有商家能够提供{" " + noneGoods}
                      </Text> */}
                    </View>
                  ) : null}
                  <View
                    style={{
                      marginTop: 20,
                      // paddingLeft: 10,
                      borderBottomColor: "#F9be7d",
                      // borderBottomWidth: 5,
                      // paddingBottom: 5,
                      flexDirection: "row-reverse",
                    }}
                  >
                    <View
                      style={[
                        styles.itemView,
                        {
                          flexDirection: "row",
                          padding: 5,
                          paddingRight: 8,
                          borderRadius: 5,
                        },
                      ]}
                    >
                      <Text style={{ fontSize: 12, marginTop: 4 }}>总价：</Text>
                      <Text style={{ fontSize: 17 }}>
                        {priceResult.toFixed(2)}
                      </Text>
                    </View>
                  </View>
                </View>
              ) : (
                <View>
                  {formQueryData[1].length == 0 ? (
                    <View style={{ alignSelf: "center", marginTop: 20 }}>
                      {/* <Text style={{ fontSize: 13, color: "#888" }}>
                        暂时没有商家能为您同时提供这些商品哦
                      </Text> */}
                    </View>
                  ) : (
                    <View>
                      {formQueryData[1].map((goods, index) => {
                        // console.log(goods);
                        if (goods) {
                          return (
                            <TouchableOpacity
                              key={index}
                              // onPress={() => {
                              //   // console.log("看看", formQueryData[2]);
                              //   navigation.navigate("SameComGoods", {
                              //     title: goods[0].company.company_name,
                              //     comGoods: goods,
                              //   });
                              // }}
                            >
                              <View style={styles.borderView}>
                                <View>
                                  <View style={styles.itemView}>
                                    <View style={{ marginTop: 2 }}>
                                      <Text>
                                        {goods[0].company.company_name}
                                      </Text>
                                      <Text
                                        style={{
                                          fontSize: 12,
                                          color: "#888",
                                          marginTop: 6,
                                          // marginBottom: 10,
                                        }}
                                      >
                                        {goods[0].company.address +
                                          " | " +
                                          goods[0].company.detailed_address}
                                      </Text>
                                    </View>
                                  </View>
                                </View>
                              </View>
                            </TouchableOpacity>
                          );
                        }
                      })}
                      <View style={{ height: 15 }}></View>
                    </View>
                  )}
                </View>
              )}
            </View>
          )}
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "#fff",
  },
  addModal: {
    justifyContent: "center",
    // height: 500,
    backgroundColor: "#fff",
    padding: 20,
    width: width * 0.9,
    margin: width * 0.05,
    marginBottom: 0,
    borderRadius: 20,
    elevation: 10, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 0,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.1, // 设置阴影的不透明度
    shadowColor: "gray", // 设置阴影色
    flexDirection: "column",
  },
  borderView: {
    marginTop: 15,
    // paddingLeft: 10,
    borderLeftColor: "#F9be7d",
    borderLeftWidth: 5,
    paddingBottom: 5,
  },
  itemView: {
    paddingLeft: 10,
  },
  line: {
    height: 3,
    width: 100,
    marginTop: 10,
    marginBottom: 10,
    marginLeft: 5,
  },
  tag: {
    borderWidth: 1,
    borderColor: "#d1d1d6",
    padding: 1,
    paddingLeft: 10,
    paddingRight: 10,
    borderRadius: 7,
    color: "#d1d1d6",
    fontSize: 12,
  },
  selectedTag: {
    borderWidth: 1,
    borderColor: "#F9be7d",
    padding: 1,
    paddingLeft: 10,
    paddingRight: 10,
    borderRadius: 7,
    color: "#F9be7d",
    fontSize: 12,
  },
});

export default FormQueryScreen;
